<template>
	<div class="bf-contact">
        <h1>{{ $t('page.index.contact.title') }}</h1>
        <h3>{{ $t('page.index.contact.desc') }}</h3>
        <ul>
          <li v-for="item,index in $t('page.index.contact.cList')" :key="index">
              <img :src="item.imgUrl" alt="">
              <div class="pcontent">
                  <p>{{ item.title }}</p>
                  <p>{{ item.desc }}</p>
              </div>
          </li>
        </ul>
    </div>
</template>  
  
<script>
export default {};
</script>  

<style>
.bf-contact {
  width: 1200px;
  margin: 50px auto 0;
  height: 316px;
}
.bf-contact ul {
  margin-top: 50px;
}
.bf-contact ul li {
  float: left;
  border: 1px solid #eee;
  width: 400px;
  height: 100px;
  padding: 35px 0 35px 103px;
}
.bf-contact ul li img {
  float: left;
}
.bf-contact ul li .pcontent {
  width: 230px;
  float: left;
  margin-left: 10px;
  position: relative;
  top: -5px;
}
.bf-contact p {
  margin-top: 10px;
}
.bf-contact ul li .pcontent p {
  margin-top: 5px;
  text-align: left;
}
</style> 